<template>
	<div class="search_article_wrapper">
		<div class="list" v-loading="loading">
			<template v-if="searchResultData.length > 0">
				<dl v-for="(item, index) in searchResultData" :key="index">
					<dt><router-link :to="{ path: item.hrefLink }" v-html="item.title"></router-link></dt>
					<dd class="des">{{ item.outline }}</dd>
					<dd class="bot">
						<span v-if="!!item.pubDate">{{ item.pubDate }}</span>
						<i class="el-icon-view">{{ item.clickCount }}</i>
						<em v-if="!!item.columnNames">分类：{{ item.columnNames }}</em>
					</dd>
				</dl>
			</template>
			<template v-else-if="searchResultData.length == 0">
				<el-empty description="未搜索到任何数据, 请更换搜索词进行搜索"></el-empty>
			</template>
		</div>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据" @change="getSearchResult"></sw-pagination>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	props: {
		columns: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			loading: false,
			searchResult: []
		};
	},
	computed: {
		searchWord() {
			return this.$route.query.keyword || '';
		},
		searchResultData() {
			return this.searchResult.map((item) => {
				return { ...item, title: this.titleTextFormat(item.title), hrefLink: this.formatLink(item) };
			});
		}
	},
	watch: {
		searchWord: {
			async handler(val) {
				this.searchValue = val;
				this.loading = true;
				await this.getSearchResult();
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		...mapActions(['getNewsData']),
		//获取搜索结果
		async getSearchResult() {
			let result = await this.getNewsData({ ...this.listQuery, title: this.searchWord });
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.searchResult = !result.data ? [] : [...result.data];
			}
		},

		titleTextFormat(value) {
			if (value == undefined) {
				return;
			}
			let reg = new RegExp(this.searchWord, 'g');
			let newst = value.replace(reg, '<font>' + this.searchWord + '</font>');
			return newst;
		},

		//格式化链接
		formatLink(data) {
			let link = '';
			let curSource = this.columns.find((item) => item.id === data.columnIds[0]);
			if (!curSource) {
				link = `/article/${data.id}`;
			} else {
				let columnInfo = this.columns.find((item) => item.id === curSource.pid);
				if (!columnInfo.value) {
					link = `/article/${data.id}`;
				} else {
					link = `${columnInfo.value}/${data.id}`;
				}
			}
			return link;
		}
	}
};
</script>

<style lang="scss" scoped>
.search_article_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	.list ::v-deep {
		flex: 1;
		padding-bottom: 30px;
		dl {
			position: relative;
			padding: 25px 0 25px 25px;
			border-bottom: solid 1px #e7e7e7;

			&::before {
				position: absolute;
				top: 38px;
				left: 0;
				width: 8px;
				height: 8px;
				content: '';
				border-radius: 50%;
				background-color: #357c65;
			}
		}

		dt {
			height: 32px;
			line-height: 32px;
			font-size: 20px;
			font-weight: normal;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			a {
				color: #333;
				text-decoration: none;

				&:hover {
					color: #357c65;
					border-bottom: solid 1px #357c65;
				}
			}

			font {
				color: #b00;
			}
		}

		dd.des {
			display: -webkit-box;
			margin: 15px 0;
			font-size: 16px;
			line-height: 1.75;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			color: #666;
		}

		dd.bot {
			color: #b2b2b2;

			span {
				margin-right: 20px;
			}

			i.el-icon-view::before {
				margin-right: 6px;
			}

			em {
				font-style: normal;
				margin-left: 20px;
			}
		}
	}
}
</style>
